<template>
  <el-container class="container">
    <el-menu
      default-active="1"
      class="nav-menu"
      background-color="#303438"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="selectNavMenu"
    >
      <el-menu-item index="1">
        <i class="el-icon-notebook-2" />
        <span slot="title">内容设置</span>
      </el-menu-item>

      <el-menu-item index="2">
        <i class="el-icon-notebook-1" />
        <span slot="title">题目设置</span>
      </el-menu-item>
    </el-menu>

    <router-view />
  </el-container>
</template>

<script>
export default {
  name: 'Manage',
  methods: {
    selectNavMenu(key, keyPath) {
      console.log(key)
      switch (key) {
        case '1':
          this.$router.push(`/manage/content`)
          break
        case '2':
          this.$router.push(`/manage/question`)
          break
      }
    }
  }
}
</script>
<style>
.container {
  height: 100%;
  width: 100%;
  position: absolute;
}
.nav-menu {
  width: auto;
  text-align: left;
  padding-right: 10px;
  min-width: 220px;
  widows: auto;
  min-height: 100%;
}
</style>
